<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	margin: 0px;
	padding: 0px;
}

#mainBody {
	width: 95%;
	margin: 0px auto;
}
</style>
<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js"
	charset="UTF-8"></script>
<script
	src="static/bootstrap-datetimepicker-master/js/moment-with-locales.min.js"></script>
<script
	src="static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".form_datetime").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			pickerPosition : "bottom-left"
		});
		
		// 给form表单对象添加一个onclick事件，改时间由当前页面的父模态框进行调用
		$("#hiddenclick").bind("click", update_form);

		//使用ajax对表单进行初始化值操作
		var uri = "queryPathVariable2/" + $("#userid").val();

		$.get(uri, function(data) {
			// 回调函数的dom操作
			// 解析json数据
			console.info(data);
			// 将ajax查询的结果进行分页处理
			// 因为返回的json数据类型是list转换而来，需要按照list标准进行解析
			if (data != null && data[0]) {
				//去除第一data
				var list = data[0];
				//使用jquery给每个控件赋值
				$("#username").val(list.username);
				$("#useradress").val(list.useradress);
				$("#userpasd").val(list.userpasd);
				$("#usersex").val(list.usersex);
				$("#userurl").val(list.userurl);
				$("#userdate").val(list.userurl);
			}
		});

	})
	function update_form(){
		// 创建一个dom的formdata对象，并设置该对象的enctype属性为multipart/form-data
		// 将from数据提出来，放入到fromdata对象中，使用fromdata对象作为ajax发送的数据对象
		var formData = new FormData($("#mainForm")[0]);
		// 设置fromdata对象的enctype属性为multipart/form-data
		formData.enctype = "multipart/form-data";
		/**
		注意：
		使用jquery的ajax想springmvc框架的action发送的ajax请求中如果有流对象，则要求做一下处理：
		（1） 使用dom的fromdata对象打包from表单，并设置fromdata对象的enctype属性为multipart/form-data；
		（2）设置jquery的ajax请求的一下两个属性为false:
			contentType: false,
			processData: false, 
		（3）springmvc框架后台的action响应方法的实体类参数不需要使用@RequestBody进行修饰，springmvc框架
			会自动对含有multipart/form-data请求进行数据类型转换。（自动将form表单数据映射为实体类）
		 **/
		// 使用jquery进行ajax请求处
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "saveByidBean/" + $("#userid").val(), // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			data : formData,
			//dataType : "json", // 响应发挥的数据类型	
			//contentType:"multipart/form-data", // form表单发送服务器时打包时的类型，包含文件流
			// 两个属性为false
			contentType : false,
			processData : false,
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
			

			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
	//使用jquery进行ajax处理
	function save_jquery() {
		$.ajax({
			url : "saveUser",//请求servlet映射地址
			type : "POST",//请求类型
			//contentType : "multipart/form-data",
			data : new FormData($('#mainForm')[0]), // 发送的数据 使用serialize方法替代手动拼写数据串,序列化表格内容为字符串的异步请求
			processData : false,
			contentType : false,
			success : function(data, textStatus, jqhr) {//由服务器返回的数据，描述请求结果，
				$("#userMsg").html("添加数据完成！！！" + "----" + textStatus);
				console.info(jqhr);

			},
			error : function(jqhr) {
				alert("!!!!!!!!!!");
			}
		});
	}
</script>
</head>
<body>
	<div id="mainBody">
		<form class="form-horizontal" id="mainForm" action="saveUser"
			enctype="multipart/form-data" method="post">
			<input type="hidden" id="userid" value="${userid}">
			<div class="form-group" style="margin-top: 10px;">
				<label class="col-sm-2 control-label">姓名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="username"
						name="username" placeholder="请输入用户名">
				</div>

				<label class="col-sm-2 control-label">地址</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="useradress"
						name="useradress" placeholder="请输入地址">
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="userpasd"
						name="userpasd" placeholder="请输入密码">
				</div>

				<label class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="usersex" name="usersex"
						placeholder="请输入性别">
				</div>


			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">注册日期</label>
				<div class="col-sm-3" class="form_datetime">
					<input type="date" class="form-control" name="userdate" id="userDate"
						name="userdate" placeholder="请输入联系电话">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">头像</label>
				<div class="col-sm-3">
					<!-- 需要加前缀预防参数直接对值进行注入-->
					<input type="file" class="form-control" id="userurl"
						name="file_userurl">
				</div>

			</div>

			<!-- 隐藏按钮控件，用于提交ajax事件 -->
			<input type="hidden" id="hiddenclick">
		</form>
	</div>
</body>
</html>